<template>
  <div class="category-tags">
    <div class="category-container">
      <button 
        v-for="category in categories" 
        :key="category.id"
        :class="{ active: modelValue === category.id }"
        @click="$emit('update:modelValue', category.id)"
      >
        {{ category.name }}
      </button>
    </div>
  </div>
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    required: true
  }
})

defineEmits(['update:modelValue'])

const categories = [
  { id: 'all', name: '全部' },
  { id: 'reality', name: '现实' },
  { id: 'cartoon', name: '漫画' }
]
</script>

<style scoped>
.category-tags {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--background-color);
  padding: 1.5rem 0;
  transition: background-color 0.3s;
}

.category-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
}

.category-tags button {
  padding: 0.6rem 2rem;
  border: 2px solid var(--border-color);
  border-radius: 30px;
  background: var(--card-bg-color);
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-tags button:hover {
  border-color: var(--primary-color);
  background: var(--hover-color);
}

.category-tags button.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
</style> 